import React, { useState } from 'react';
import Round from './Round';
import { createContext } from 'react';

const RoundBackgroundContext = createContext({
    highlight: (index) => {}
});

const RoundBackground = ({ positions }) => {
    const [highlightIndex, setHighlightIndex] = useState(null);
    const [showRounds, setShowRounds] = useState(false); // 控制是否显示 Rounds

    // 函数用于高亮指定的圆点
    const highlightRound = (index) => {
        if (index >= 0 && index < positions.length) {
            setHighlightIndex(index);
        } else {
            console.warn('Index out of range');
        }
    };

    const context = {
        highlight: highlightRound
    };

    return (
        <div>
            {/*<button onClick={() => setShowRounds(true)}>生成 Round</button> /!* 添加按钮 *!/*/}
            { positions.map((pos, index) => (
                <Round
                    key={index}
                    x={pos.x}
                    y={pos.y}
                    color={index === highlightIndex ? 'red' : 'black'}
                />
            ))}
        </div>
    );
};

export default RoundBackground;

